<template>
    <div class="con">
        <div class="header">
            <ul class="head_one">
                <li>{{ shopObj.deliveryPrice }}.0</li>
                <li>综合评分</li>
                <li>高于周边商家96%</li>
            </ul>
            <ul class="head_two">
                <li>服务态度
                    <van-rate v-model="shopObj.deliveryPrice" color="#ffd21e" allow-half />
                </li>
                <li>菜品质量
                    <van-rate v-model="shopObj.score" color="#ffd21e" allow-half />
                </li>
                <li>送达时间 <span>{{ shopObj.minPrice }}</span></li>
            </ul>


        </div>
        <div class="score">
            <div>
                <van-tabs v-model:active="active">
                    <van-tab title="全部24">
                        <div v-for="(item, index) in goodsData" :key="index">
                            <div v-for="(menu) in item.foods" :key="menu.id">
                                <div v-for="(child, i) in menu.ratings" :key="i" class="ulist">
                                    <ul class="u1">
                                        <li>
                                            <van-image round width="2rem" height="2rem" :src="child.avatar" />
                                        </li>
                                    </ul>
                                    <ul class="u2">
                                        <li>
                                            <ul class="ul_one">
                                                <li>{{child.username}}</li>
                                                <li>{{child.rateTime}}</li>
                                            </ul>
                                        </li>
                                        <li><van-rate v-model="shopObj.score" color="#ffd21e" allow-half />
                                        <span>{{ shopObj.minPrice }}</span>
                                        </li>
                                        <li>{{child.text}}</li>
                                    </ul>
                                </div>

                            </div>

                        </div>
                    </van-tab>
                    <van-tab title="满意18">满意18</van-tab>
                    <van-tab title="不满意6">不满意6</van-tab>
                </van-tabs>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { api_queryShop } from '../../api/shop';
import { defineComponent } from 'vue'
import { shopEntity } from '../../components/comheader/shop';
import { api_goodquery } from '../../api/goods';
import { GoodsEntity } from './goods';
export default defineComponent({
    setup() {
        const dataSoure = reactive(new shopEntity());
        const scoreData = reactive(new GoodsEntity());
        const query = async () => {
            let rst = await api_queryShop();
            let aa = await api_goodquery();
            scoreData.goodsData = aa.data;
            dataSoure.shopObj = rst.data;
        }
        query();
        const active = ref(0);

        return { ...toRefs(dataSoure), ...toRefs(scoreData), active }
    }
})
</script>

<style lang="scss" scoped>
.con {
    height: 100%;
    background-color: #F4F5F7;
    display: flex;
    flex-direction: column;

    .header {
        flex: 0 0 120px;
        background-color: #fff;
        display: flex;
        align-items: center;

        .head_one {
            flex: 0 0 120px;
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;

            li {
                margin-top: 10px;
            }

            li:nth-child(1) {
                font-size: 30px;
                color: red;
            }

            li:nth-child(2) {
                font-size: 15px;
            }

            li:nth-child(3) {
                font-size: 10px;
                color: #ddd;
            }
        }

        .head_two {
            flex: 1;
            margin-left: 20px;

            li {
                margin-top: 5px;
            }
        }
    }

    .score {
        width: 100%;
        margin-top: 30px;
        background-color: #fff;
        flex: 1;
        overflow: scroll;
        .ulist{
            padding-top: 10px;
            display: flex;
            width: 100%;
            border-bottom: 1px solid #ddd;
            .u1{
                margin-left: 10px;
                flex: 0 0 40px;
            }
            .u2{
                flex: 1;
                height: 70px;
            }
            
           
        }
         .ul_one{
            width: 100%;
                display: flex;
                  justify-content: space-between;
              
            }
    }
}
</style>